<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>我承诺</title>
    <!--<script src="http://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>-->
    <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
    <script src="layout.js"></script>
    <script src="wxsdk.js"></script>
    <link href="style.css" rel="stylesheet">
</head>
<body>
<div class="shade"><img src="img/s.png"></div>
<div id="dialog">
    <div class="shadow"></div>
    <div class="body">
        <div>
            <div class="text">
                <div>
                <span>
                    你愿意做出以下承诺吗？<br>
                </span>
                    <br>
                <span class="normal">
                    在新的一年里<br>对每一位顾客的纹身负责<br>给出最好的纹身建议<br>坚决抵制不规范操作<br>做一名值得信赖的纹身师<br>
                </span>
                </div>
            </div>
            <div class="frame">
                <img src="img/frame.png">
            </div>
            <form class="input-area">
                我是<input type="text" maxlength="10" placeholder="你的名字" id="name">
                <br>
                来自<input type="text" maxlength="10" placeholder="来自哪里" id="city">
                <button class="ava">我承诺</button>
            </form>
        </div>
    </div>
</div>
<div id="banner">
    <img src="img/banner.png">
</div>
<div id="body">
    <div id="article">
        <div class="text">
            <div>
                <span id="insert">

                </span>
                <br>
                <span class="normal">
                    在新的一年里<br>对每一位顾客的纹身负责<br>给出最好的纹身建议<br>坚决抵制不规范操作<br>做一名值得信赖的纹身师<br>
                </span>
            </div>
        </div>
        <div class="frame">
            <img src="img/frame.png">
        </div>
    </div>
    <div id="count">
        ...
    </div>
    <button class="ava">我也要承诺</button>
    <footer>
        点此关注<b>纹身大咖</b>了解更多纹身资讯
    </footer>
</div>
</body>
<script>

    //配置部分
    {
        var encode = encodeURIComponent;
        var decode = decodeURIComponent;

        var text_content = "我是<b>{{name}}</b><br>来自<b>{{city}}</b>的纹身师<br>我承诺<br>";
        var text_promise = "已有<b>{{num}}</b>名纹身师做出了承诺";

        var def = {
            name: "iNahoo",
            city: "二次元",
            num: 14296
        };

        var api = {
//            get: 'api/get.js?callback=?',
            get: 'http://182.92.161.173:3003/acceptance?callback=?',
//            push: 'api/get.js?callback=?'
            push: 'http://182.92.161.173:3003/acceptance/add?callback=?'
        };

        var name = decode(location.hash.replace('#', '').split('&')[0] || def.name);
        var city = decode(location.hash.split('&')[1] || def.city);
    }

    //微信部分
    {
        var setWXShare = function (name) {

            var imgUrl = location.origin + location.pathname.match(/.*\//)[0] + 'img/favicon.png';
            var link = location.href;
            console.log(imgUrl);

            wx.onMenuShareAppMessage({
                title: '我是{{name}}，我想告诉今年想纹身的朋友'.replace('{{name}}', name),
                desc: '纹身不是游戏，请尊重每一寸肌肤',
                imgUrl: imgUrl,
                link: link
            });

            wx.onMenuShareTimeline({
                title: '我是{{name}}，我想告诉今年想纹身的朋友'.replace('{{name}}', name),
                link: link,
                imgUrl: imgUrl
            });

            wx.onMenuShareQQ({
                title: '我是{{name}}，我想告诉今年想纹身的朋友'.replace('{{name}}', name),
                desc: '纹身不是游戏，请尊重每一寸肌肤',
                imgUrl: imgUrl,
                link: link
            });

            wx.onMenuShareWeibo({
                title: '我是{{name}}，我想告诉今年想纹身的朋友'.replace('{{name}}', name),
                desc: '纹身不是游戏，请尊重每一寸肌肤',
                imgUrl: imgUrl,
                link: link
            });


        };

        // 获取微信sign
        var getWxSign = function () {
            var wxUrl = encodeURIComponent(location.href.split('#')[0]);
            $.ajax({
                url: "http://api.mzg.so/V1.0.0/Weixin/Public/token/?callback=?&url=" + wxUrl,
                dataType: 'jsonp',
                success: function (obj) {
                    obj = JSON.parse(obj);
                    var appId = obj.data.app_id,
                            timestamp = obj.data.timestamp,
                            nonceStr = obj.data.noncestr,
                            signature = obj.data.signature;
                    wx.config({
//                        debug: true,
                        appId: appId,
                        timestamp: timestamp,
                        nonceStr: nonceStr,
                        signature: signature,
                        jsApiList: [
                            'onMenuShareTimeline',
                            'onMenuShareAppMessage',
                            'onMenuShareQQ',
                            'onMenuShareWeibo'
                        ]
                    });
                    wx.ready(function () {
                        wx.checkJsApi({
                            jsApiList: [
                                'getNetworkType',
                                'previewImage'
                            ],
                            success: function (res) {
                                check.done();
                                setWXShare(name);
                            }
                        });
                    })
                }
            });
        };

        getWxSign();
    }

    var check = {
        count: 2,
        done: function () {
            if (check.count) {
                check.count--
            } else {
                setTimeout(function () {
                    $('body').scrollTo(99999, {duration: 500});
                }, 1000);
            }
        }
    };


    //事件绑定
    var e = {
        init: function () {
            $.ajax({
                url: api.get,
                dataType: 'jsonp',
                success: function (res) {
                    var num = res.data.acceptance;
                    $(document).ready(function () {
                        $('#count')
                                .html(text_promise.replace('{{num}}', num))
                                .css({opacity: 1});
                    });
                    check.done();
                }
            });
        },
        //废弃
        checkInput: function () {
            if ($('#city').val() && $('#name').val()) {
                $('#dialog button').addClass('ava');
            } else {
                $('#dialog button').removeClass('ava');
            }
        },
        promise: function () {
            if ($(this).hasClass('ava')) {
                $('#dialog').show();
            }
        },
        wish: function (event) {
            event.preventDefault();
            var temp_name = $('#name').val();
            var temp_city = $('#city').val();
            if (temp_name && temp_city) {
                name = temp_name;
                city = temp_city;
                $.ajax({
                    url: api.push,
                    dataType: 'jsonp',
                    success: function (res) {
                        var num = res.data.acceptance;
                        $('#count').html(text_promise.replace('{{num}}', num));

                        location.hash = encode(name) + '&' + encode(city);
                        $('#insert').html(text_content.replace('{{name}}', name).replace('{{city}}', city));

                        setWXShare(name);
                        e.close();
                        $('.shade').show();
                        $('#body button').removeClass('ava').text('已承诺');
                        document.cookie = 'AllreadyPromised';
                        setTimeout(function () {
                            $('.shade').hide();
                        }, 3000)
                    }
                })
            } else if (temp_name) {
                $('#city').focus();
            } else {
                $('#name').focus();
            }
        },
        close: function () {
            $('#dialog').hide();
        },
        follow: function () {
            location.href = 'http://mp.weixin.qq.com/s?__biz=MzIwMTI1NDI3NQ==&mid=401974905&idx=1&sn=06355e68f0392e18c2404dbc3a8ff740&scene=1&srcid=0308ytMSripdKtUp7KqLnP8V&from=singlemessage&isappinstalled=0';
        }
    };

    e.init();
    $(document).ready(function () {

        $('#insert').html(text_content.replace('{{name}}', name).replace('{{city}}', city));

        //检查Cookie
        if (document.cookie.match('AllreadyPromised') != null) {
            $('#body button').removeClass('ava').text('已承诺');
        }

        //oninput 和 onchange 都不生效啊，坑爹。
//        setInterval(e.checkInput, 50);
        $('#body button').on('click', e.promise);
        $('#dialog .shadow').on('click', e.close);
        $('#dialog button').on('click', e.wish);
        $('#body footer').on('click', e.follow);
        check.done();

    });

</script>
</html>